<template>
  <!-- 主体列表 -->
  <el-table
    :data="paging.slice((pageNum - 1) * PageSize, pageNum * PageSize)"
    border
    class="PageSizepageNum"
  >
    <el-table-column
      type="index"
      :index="indexMethod"
      label="序号"
    ></el-table-column>

    <el-table-column class="el-icon-question details-icon" label="所属页面">
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dbName }}
        </div>
      </template>
    </el-table-column>

    <el-table-column label="提示目标">
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceName }}
        </div>
      </template>
    </el-table-column>

    <el-table-column label="提示信息">
      <template slot-scope="scope">
        <div :class="scope.row.isClass" @click="isinfo(scope.row)">
          {{ scope.row.dataSourceType }}
        </div>
      </template>
    </el-table-column>


    <el-table-column prop="dataSourceUrl" label="提示id"> </el-table-column>
    <el-table-column
      prop="updateTime"
      width="170px"
      label="更新时间"
    ></el-table-column>
    <el-table-column label="操作" width="230px">
      <template slot-scope="scope">
        <el-button @click="handleEditSee(scope.row)" type="primary" size="small"
          >应用
        </el-button>

        <el-button @click="handleEdit(scope.row)" type="primary" size="small"
          >编辑
        </el-button>

        <el-button @click="open(scope.row.id)" type="danger" size="small"
          >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
// import { DeleteHicky } from "@/assets/js/api";
export default {
  props: {
    name: {
      type: Object,
      default: () => {},
    },
    // paging: {
    //   type: Array,
    //   default: null,
    // },
    totalCount: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      paging: [
        {
          id:1,
          dbName: "交易看板",
          dataSourceName: "下单金额",
          dataSourceType: "产生订单的订单总金额",
          updateTime: "09:20:33",
          dataSourceUrl: 1,
          isClass: "isStyle",
        },
        {
          id:2,
          dbName: "交易看板",
          dataSourceName: "下单用户数",
          dataSourceType: "产生订单的用户数量（人）",
          updateTime: "09:20:33",
          dataSourceUrl: 2,
          isClass: "isStyle",
        },
        {
          id:3,
          dbName: "交易看板",
          dataSourceName: "下单订单量",
          dataSourceType: "产生订单的用户数量（人）",
          updateTime: "09:20:33",
          dataSourceUrl: 3,
          isClass: "isStyle",
        },
        {
          id:4,
          dbName: "交易看板",
          dataSourceName: "付费金额",
          dataSourceType: "实际支付金额>0，且下单当日非退款且非活动赠送金额",
          updateTime: "09:20:33",
          dataSourceUrl: 4,
          isClass: "isStyle",
        },
        {
          id:5,
          dbName: "交易看板",
          dataSourceName: "付费用户数",
          dataSourceType:
            "实际支付金额>0，且下单当日非退款且非活动赠送订单的用户数量（人）",
          updateTime: "09:20:33",
          dataSourceUrl: 5,
          isClass: "isStyle",
        },
        {
          id:6,
          dbName: "交易看板",
          dataSourceName: "付费订单量",
          dataSourceType:
            "实际支付金额>0，且下单当日非退款且非活动赠送订单数量（笔）",
          updateTime: "09:20:33",
          dataSourceUrl: 6,
          isClass: "isStyle",
        },
      ],
      // 当前页
      pageNum: 1,
      // 每页条数
      PageSize: 10,
      //弹窗表单
      ruleForm: {
        id: "",
        dataSourceName: "",
        dbName: "",
        dataSourceUrl: "",
        // dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      },
    };
  },
  methods: {
    // 删除
    open(res) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(res);
          // let ros = { id: res };
          // let add = await DeleteHicky(ros);
          // if (add.code == 0) {
          //   this.$message({
          //     type: "success",
          //     message: "删除成功!",
          //   });
          //   this.$emit("inquire", true);
          // } else if (add.code == 1) {
          //   this.$message.error(add.msg);
          // } else if (add.code == -2) {
          //   this.$message({
          //     type: "warning",
          //     message: add.msg,
          //   });
          // } else {
          //   this.$message.error("删除失败!");
          // }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 表格内显示与隐藏
    isinfo(val) {
      if (val.isClass == "isStyle") {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "";
          }
        });
      } else {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "isStyle";
          }
        });
      }
    },
    //  序号翻页连续排序
    indexMethod(index) {
      return (this.name.pageNum - 1) * this.name.pageSize + index + 1;
    },
    // 查看
    handleEditSee() {
      // alert(`现在是 ${new Date().toLocaleDateString()}`)  //年月日
      // alert(`现在是 ${new Date().toLocaleString()}`)      //年月日时分秒
      // alert(`现在是 ${new Date().toLocaleTimeString()}`)  //时分秒
      alert(`现在是 ${Date.parse(new Date())/1000}`)      //时间戳
    },
    // 编辑按钮
    handleEdit(row) {
      this.$emit("isEditTable", true);
      this.$emit("Modify", "编辑");
      this.$emit("isDialog", true);
      this.ruleForm = {
        id: row.id,
        dbName: row.dbName,
        dataSourceName: row.dataSourceName,
        dataSourceType: row.dataSourceType,
        dataSourceUrl: row.dataSourceUrl,
        // // dataSourceUserName: row.dataSourceUserName,
        // dataSourcePwd: row.dataSourcePwd,
        // dataSourceDesc: row.dataSourceDesc,
      };
      this.$emit("ruleForm", this.ruleForm);
      this.$emit("ReplaceType", true);
    },
  },
};
</script>

<style scoped>
.isStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>